<template>
    <div>
        <div class="sidebar" v-if="isShowSidebar && roleMenuData.length > 0">
            <el-menu 
                :default-active="onRoutes" 
                class="sidebar-menu" 
                unique-opened 
                router 
                background-color="#3B4966"
                text-color="#fff"
            >
                <template v-for="item in roleMenuData">
                    <template v-if="item.subs">
                        <el-submenu :index="item.index" :key="item.index">
                            <template slot="title">
                                <i :class="item.icon"></i>{{ item.title }}
                            </template>
                            <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
                            </el-menu-item>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.index" :key="item.index">
                            <i :class="item.icon"></i>{{ item.title }}
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
        </div>
    </div>
</template>

<script>
import Storage from "@/utils/storage";
export default {
    data() {
        return {
            isShowSidebar: false,
            roleMenuArr: [],
            roleAuthIdArr: [],
            roleMenuData: []
            // roleMenuData: [
            //     {
            //         icon: 'el-icon-user-solid',
            //         index: 'userManage',
            //         title: '用户管理',
            //         subs: [
            //             {
            //                 index: 'userList',
            //                 title: '用户信息列表'
            //             }
            //         ]
            //     },
            //     {
            //         icon: 'el-icon-s-order',
            //         index: 'orderManage',
            //         title: '订单管理',
            //         subs: [
            //             {
            //                 index: 'cattleOrderList',
            //                 title: '牛采购订单'
            //             },
            //             {
            //                 index: 'resaleOrderList',
            //                 title: '转售记录'
            //             },
            //             {
            //                 index: 'buyOrderList',
            //                 title: '求购订单'
            //             },
            //             {
            //                 index: 'supplyOrderList',
            //                 title: '供货记录'
            //             },
            //             {
            //                 index: 'fungusOrderList',
            //                 title: '黑木耳订单'
            //             }
            //         ]
            //     },
            //     {
            //         icon: 'el-icon-s-cooperation',
            //         index: 'cattleAuditManage',
            //         title: '牛只流动审核',
            //         subs: [
            //             {
            //                 index: 'resaleAuditList',
            //                 title: '转售审核'
            //             },
            //             {
            //                 index: 'buyAuditList',
            //                 title: '求购审核'
            //             },
            //             {
            //                 index: 'deliveryRemind',
            //                 title: '交货期提醒'
            //             },
            //             {
            //                 index: 'resaleExpireRemind',
            //                 title: '转售订单到期提醒'
            //             }
            //         ]
            //     },
            //     {
            //         icon: 'el-icon-truck',
            //         index: 'logisticsManage',
            //         title: '订单物流管理',
            //         subs: [
            //             {
            //                 index: 'logisticsList',
            //                 title: '物流列表'
            //             },
            //         ]
            //     },
            //     {
            //         icon: 'el-icon-s-finance',
            //         index: 'financeManage',
            //         title: '财务管理',
            //         subs: [
            //             {
            //                 index: 'balanceList',
            //                 title: '账户余额流水'
            //             },
            //             {
            //                 index: 'withdrawTrialList',
            //                 title: '提现初审'
            //             },
            //             {
            //                 index: 'withdrawReviewList',
            //                 title: '提现复审'
            //             }
            //         ]
            //     },
            //     {
            //         icon: 'el-icon-s-flag',
            //         index: 'projectManage',
            //         title: '项目管理',
            //         subs: [
            //             {
            //                 index: 'cattleProjectList',
            //                 title: '牛标的管理'
            //             },
            //             {
            //                 index: 'fungusProjectList',
            //                 title: '黑木耳项目管理'
            //             }
            //         ]
            //     },
            //     {
            //         icon: 'el-icon-s-platform',
            //         index: 'applyManage',
            //         title: '应用配置',
            //         subs: [
            //             {
            //                 index: 'bannerList',
            //                 title: 'banner配置'
            //             },
            //             {
            //                 index: 'platformNewsList',
            //                 title: '平台资讯配置'
            //             },
            //             {
            //                 index: 'farmVideoList',
            //                 title: '牧场视频配置'
            //             },
            //             {
            //                 index: 'feedbackList',
            //                 title: '意见反馈中心'
            //             }
            //         ]
            //     },
            //     {
            //         icon: 'el-icon-s-data',
            //         index: 'dataManage',
            //         title: '数据统计',
            //         subs: [
            //             {
            //                 index: 'operateDataList',
            //                 title: '运营数据统计'
            //             }
            //         ]
            //     },
            //     {
            //         icon: 'el-icon-s-tools',
            //         index: 'systemManage',
            //         title: '系统管理',
            //         subs: [
            //             {
            //                 index: 'roleList',
            //                 title: '角色管理'
            //             },
            //             {
            //                 index: 'accountList',
            //                 title: '账号管理'
            //             },
            //             {
            //                 index: 'backLogList',
            //                 title: '后台日志'
            //             }
            //         ]
            //     }
            // ]
        }
    },
    created() {
        this.roleMenuData = JSON.parse(Storage.get('roleMenuData')) || []
        this.roleMenuArr = []
    },
    computed:{
        onRoutes(){
            return this.$route.path.replace('/','');
        },
        getLoginState() {
            return this.$store.state.user.loginState
        }
    },
    watch: {
        $route(to, from) {
            let bottomPage = ['login'];
            let toPageName = to.name;
            let isNeedShowSidebar = true;
            for (let i=0; i<bottomPage.length; i++) {
                if (toPageName === bottomPage[i]) {
                    isNeedShowSidebar = false;
                    break;
                }
            }
            this.isShowSidebar = isNeedShowSidebar;
        },
        getLoginState(val) {
            if(val) {
                setTimeout(() => {
                    this.getRoleMenuFn()
                }, 500)
            }
        }
    },
    methods: {
        getRoleMenuFn() {
            this.$http.get('/role/owner/menu')
                .then((res) => {
                    if(res.data.length > 0) {
                        let dd = []
                        for(let i = 0; i < res.data.length; i++) {
                            let item = res.data[i]
                            this.roleMenuArr.push(item.id)
                            let mm = {
                                icon: item.icon,
                                index: item.name,
                                title: item.title,
                                subs: []
                            }
                            if(item.children) {
                                for(let j = 0; j < item.children.length; j++) {
                                    let iitem = item.children[j]
                                    this.roleMenuArr.push(iitem.id)
                                    let nn = {
                                        index: iitem.name,
                                        title: iitem.title
                                    }
                                    mm.subs.push(nn)
                                }
                            }
                            dd.push(mm) 
                        }
                        this.roleMenuData = dd;
                        Storage.set('roleMenuData', JSON.stringify(this.roleMenuData))
                    }else{
                        Storage.set('roleMenuData', JSON.stringify([]));
                    }
                })
                .then(() => {
                    if(this.roleMenuArr.length > 0) {
                        for(let i = 0; i < this.roleMenuArr.length; i++) {
                            this.getAuthorityFn(this.roleMenuArr[i])
                        }
                    }
                })
        },
        getAuthorityFn(routerId) { //获取当前角色下的权限按钮
            this.$http.get(`/role/${Storage.get('userRoleId')}/${routerId}/button`)
                .then((res) => {
                    if(res.data.length > 0) {
                        res.data.forEach(item => {
                            this.roleAuthIdArr.push(item.id)
                        })
                        Storage.set('roleAuthIdArr', JSON.stringify(this.roleAuthIdArr))
                    }
                })
        },
    }
}
</script>

<style lang="scss" scoped>
    .sidebar {
        width: 200px;
        height: calc(100vh - 60px);
        background-color: #3B4966;
        color: #fff;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .sidebar::-webkit-scrollbar {
        width: 0;
    }
    .el-menu {
        border-right: 1px solid #3B4966;
    }
</style>

<style lang="scss">
    .sidebar {
        .el-submenu__title {
            i {
                color: #fff;
            }
        }
        .el-menu-item.is-active {
            color: #fff;
            background-color: #4572CF!important;
        }
    }
</style>